<template>
    <div class="list">
        <Header>
            <template v-slot:icon-l><i class="iconfont icon-fanhui" @click="goBack"></i></template>
            <div class="search-box">
                <i class="iconfont icon-search"></i>
                <form action="" onsubmit="return false">
                    <input type="search" placeholder="搜您喜欢的产品..." @click="goSearchIndex" class="search-txt"
                    v-model="searchValue">
                </form>
            </div>
            <template v-slot:icon-r><i class="iconfont icon-fangzi"></i></template>
        </Header>
        <section>
            <div class="list-l" ref="left">
                <ul class="l-item">
                    <li v-for="(item, index) of leftData" :key="index" @click="goScroll(index)"
                    :class="{ active: index == currentIndex }">{{ item.name }}</li>
                </ul>
            </div>
            <div class="list-r" ref="right">
                <ul class="content">
                    <li class="shop-list" v-for="(item, index) of rightData" :key="index" ref="shopList">
                        <h2>{{ item.name }}</h2>
                        <ul class="r-content">
                            <li v-for="(v, i) of item.list" :key="i">
                                <img :src="v.imgUrl" alt="">
                                <span>{{ v.name }}</span>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </section>
    </div>
</template>

<script>

import Header from '@/components/common/Header.vue'
import betterScroll from 'better-scroll'
export default {
    components: {
        Header,
        betterScroll
    },
    data() {
        return {
            searchValue: '',
            leftData: [],
            rightData: [],
            rightScroll: '',
            allHeght: [],//右侧所有元素高
            scrollY: 0//右侧滚动距离
        }
    },
    computed: {
        currentIndex() {
            return this.allHeght.findIndex((item, index) => {
                return this.scrollY >= item && this.scrollY < this.allHeght[index + 1]
            })
        }
    },
    watch: {},
    methods: {
        goBack() {
            this.$router.back()
        },
        goSearchList() {
            
        },
        async getData() {
            let res = await this.$axios({
                url: '/api/goods/list'
            })
            let leftArr = []
            let rightArr = []
            res.data.data.forEach(ele => {
                leftArr.push({
                    id: ele.id,
                    name: ele.name
                })
                rightArr.push(ele.data[0])
            })
            this.leftData = leftArr
            this.rightData = rightArr
        },
        //点击左侧,右侧对应滚动
        goScroll(index) {
            this.rightScroll.scrollTo(0, -this.allHeght[index], 300)
        },
        goSearchIndex() {
            this.$router.push({ name: 'search' })
        }
    },
    created() {
        this.getData().then(()=>{
            //左侧点击
            new betterScroll(this.$refs.left, {
                click: true
            })
            //右侧滚动
            this.rightScroll = new betterScroll(this.$refs.right, {
                click: true,
                probeType: 3
            })
            //统计右侧所有高度
            let height = 0
            this.allHeght.push(height)
            let uls = this.$refs.shopList
            uls.forEach(v => {
                this.allHeght.push(height += v.clientHeight)
            })
            //获取右侧滚动高度
            this.rightScroll.on('scroll', (pos) => {
                this.scrollY = Math.abs(pos.y)
            })
        })
    },
    mounted() {
    },
    beforeCreate() { },
    beforeMount() { },
    beforeUpdate() { },
    updated() {
    },
    beforeDestroy() { },
    destroyed() { },
    activated() { }
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.list {
    ::v-deep .icon-fanhui {
        font-size: .56rem;
    }
    
    .icon-fangzi {
        font-size: .9333rem;
    }
    
    ::v-deep .icon-r {
        margin-top: -0.1333rem;
    }
    
    ::v-deep .icon-l {
        padding-left: .08rem;
        width: auto;
    }
    
    .search-box {
        
        form {
            flex: 1;
            padding-right: .5333rem;
            
            .search-txt {
                width: 100%;
                color: #000;
            }
        }
    }
    
    section {
        display: flex;
        box-sizing: border-box;
        height: calc(100vh - 3.2rem);
        border-bottom: 1px solid #ccc;
        
        .list-l {
            overflow: hidden;
            width: 2.48rem;
            background-color: #fff;
            border-right: 1px solid #ccc;
            
            .l-item {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                
                li {
                    box-sizing: border-box;
                    width: 100%;
                    padding: 3px;
                    margin: .5333rem 0;
                    text-align: center;
                    font-size: .3733rem;
                }
                
                .active {
                    color: #b54f4a;
                    border-left: 6px solid #b54f4a;
                }
            }
        }
        
        .list-r {
            flex: 1;
            overflow: hidden;
            
            .content {
                
                .shop-list {
                    text-align: center;
                    
                    h2 {
                        font-size: .64rem;
                        font-weight: 400;
                        padding: .5333rem;
                    }
                    
                    .r-content {
                        display: flex;
                        flex-wrap: wrap;
                        
                        li {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            width: 33.3%;
                            padding: .2667rem 0;
                            
                            img {
                                width: 1.4133rem;
                                height: 1.4133rem;
                            }
                            
                            span {
                                font-size: .4267rem;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
